<!-- src/components/register/PublicRegisterForm.vue -->
<template>
  <el-form
      ref="publicFormRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      class="register-form"
  >
    <el-form-item label="手机号" prop="phone">
      <el-input
          v-model="formData.phone"
          placeholder="请输入手机号"
          maxlength="11"
      >
        <template #append>
          <el-button
              :disabled="countdown > 0"
              @click="sendSmsCode"
          >
            {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
          </el-button>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item label="验证码" prop="smsCode">
      <el-input
          v-model="formData.smsCode"
          placeholder="请输入验证码"
          maxlength="6"
      />
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input
          v-model="formData.password"
          type="password"
          placeholder="6-20位字母数字组合"
          show-password
      />
    </el-form-item>

    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input
          v-model="formData.confirmPassword"
          type="password"
          placeholder="请再次输入密码"
          show-password
      />
    </el-form-item>

    <el-form-item label="姓名" prop="name">
      <el-input
          v-model="formData.name"
          placeholder="请输入真实姓名"
      />
    </el-form-item>

    <el-form-item label="身份证号" prop="idCard">
      <el-input
          v-model="formData.idCard"
          placeholder="请输入身份证号(选填)"
          maxlength="18"
      />
    </el-form-item>

    <el-form-item>
      <el-button
          type="primary"
          class="submit-btn"
          @click="submitForm"
      >
        立即注册
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
const emit = defineEmits(['submit'])
// 表单数据
const formData = reactive({
  phone: '',
  smsCode: '',
  password: '',
  confirmPassword: '',
  name: '',
  idCard: ''
})
// 验证规则
const formRules = reactive({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger:
          'blur' }
  ],
  smsCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { pattern: /^\d{6}$/, message: '验证码为6位数字', trigger: 'blur'
    }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度6-20位', trigger: 'blur' },
    { pattern: /^(?=.*[a-zA-Z])(?=.*\d).+$/, message: '需包含字母和数
      字', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== formData.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '姓名长度2-10位', trigger: 'blur' }
  ]
})
const publicFormRef = ref(null)
const countdown = ref(0)
let countdownTimer = null
// 发送验证码
const sendSmsCode = () => {
  // 实际项目中调用短信接口
  console.log('发送验证码到:', formData.phone)

  // 开启倒计时
  countdown.value = 60
  countdownTimer = setInterval(() => {
    if (countdown.value <= 0) {
      clearInterval(countdownTimer)
      return
    }
    countdown.value--
  }, 1000)

  ElMessage.success('验证码已发送，请查收')
}
// 提交表单
const submitForm = async () => {
  try {
    await publicFormRef.value.validate()
    // 提交前数据处理
    const submitData = {
      phone: formData.phone,
      password: formData.password,
      name: formData.name,
      smsCode: formData.smsCode
    }

    // 添加可选字段
    if (formData.idCard) {
      submitData.idCard = formData.idCard
    }

    // 触发注册操作
    emit('submit', submitData)
  } catch (error) {
    ElMessage.warning('请完善表单信息')
  }
}
</script>
<style scoped>
.register-form {
  padding: 20px;
}
.submit-btn {
  width: 100%;
  margin-top: 20px;
}
</style>